//base
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
//less
import './index.less'
import If from '../../../components/page-components/if'

class SwitchRole extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentRole: []
    }
  }
  componentWillMount() {
    //onLoad
    const { role } = this.props
    let currentRoleNew = []
    switch (role) {
      case 'company':
          currentRoleNew.push({
          roleImg: 'https://imagesize.hrwork.com/sp/files/f596fab3-8b20-4ef6-aa44-b737d4b406a8.png',
          roleLabel: '我要求职',
          check: true
        })
        break
      case 'personal':
          currentRoleNew.push({
          roleImg: 'https://imagesize.hrwork.com/sp/files/971bbaa8-67eb-4bfe-9f2e-953569d2fcc1.png',
          roleLabel: '我要招聘',
          check: true
        })
        break
      case 'all':
          currentRoleNew.push({
          roleImg: 'https://imagesize.hrwork.com/sp/files/f596fab3-8b20-4ef6-aa44-b737d4b406a8.png',
          roleLabel: '我要求职',
          check: true,
          role: 'personal'
        })
        currentRoleNew.push({
          roleImg: 'https://imagesize.hrwork.com/sp/files/971bbaa8-67eb-4bfe-9f2e-953569d2fcc1.png',
          roleLabel: '我要招聘',
          check: false,
          role: 'company'
        })
        break
    }
    this.setState({
      currentRole: currentRoleNew
    })
  }

  componentDidMount() {
    //onready
  }

  componentWillUnmount() {
    //onUnload
  }

  componentWillReceiveProps(nextprops) {}

  delay(time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }

  clickRole = e => {
    const { role } = this.props
    const { currentRole = [] } = this.state
    if (role == 'all') {
      const index = e.currentTarget.dataset.index
      let currentRoleNew = [ ...currentRole ]
      currentRoleNew.forEach((item, index) => {
        currentRoleNew[index].check = false
      })
      currentRoleNew[index].check = true
      this.setState({
        currentRole: currentRoleNew
      })
    }
  }

  confirmClick = () => {
    const { role, onConfirm } = this.props
    if (role == 'all') {
      const { currentRole = [] } = this.state
      onConfirm && onConfirm(currentRole)
    } else {
      onConfirm && onConfirm(role)
    }
  }

  render() {
    const { role } = this.props
    const {currentRole} = this.state
    let name = role == 'all' ? '选择身份' : '切换身份'
    return (
      <View className="SwitchRole_id47670">
        <View className="switch_role_view">
          <Text className="switch_role_title">{name}</Text>
          <View className="change-role">
            {currentRole.map((item, index) => {
              return (
                <View
                  className={`container ${currentRole.length == 2 ? 'marginL' : ''}`}
                  data-index={index}
                  onClick={this.clickRole}
                >
                  <Image className="role_img" src={item.roleImg} />
                  <Text className="switch_role_type">{item.roleLabel}</Text>
                  <If visible={item.check}>
                    <Image
                      className="switch_role_bottom_img"
                      src="https://imagesize.hrwork.com/sp/files/a50b0a95-725c-4788-a280-e1163ae653d5.png"
                    />
                  </If>
                </View>
              )
            })}
          </View>
          <View className="confirm_switch_view" onClick={this.confirmClick}>
            <Text className="confirm_switch">确定</Text>
          </View>
        </View>
      </View>
    )
  }

}

export default SwitchRole
